<template>
  <el-container>
    <el-aside width="200px">
      <div class="logo">
        <img src="~/static/picture/logo.png" alt="">
      </div>
      <el-menu :router="true" :default-active="currentRoute">
        <el-menu-item index="/admin/board">
          <i class="el-icon-data-line"></i>
          <span slot="title">儀表盤</span>
        </el-menu-item>
        <el-submenu index="/admin/test/1">
          <template slot="title"><i class="el-icon-setting"></i>系統配置</template>
          <el-menu-item-group>
            <el-menu-item index="/admin/basic-settings">基礎配置</el-menu-item>
            <el-menu-item index="/admin/test/3">菜單欄設置</el-menu-item>
            <el-menu-item index="/admin/test/4">輪播圖配置</el-menu-item>
            <el-menu-item index="/admin/test/5">計算器設置</el-menu-item>
            <el-menu-item index="/admin/test/6">SEO設置</el-menu-item>
            <el-menu-item index="/admin/test/7">配置廣告視頻</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="/admin/test/8">
          <i class="el-icon-collection"></i>
          <span slot="title">檔案格式管理</span>
        </el-menu-item>
        <el-submenu index="/admin/test/9">
          <template slot="title"><i class="el-icon-set-up"></i>車輛規格設置</template>
          <el-menu-item-group>
            <el-menu-item index="/admin/test/10">車況</el-menu-item>
            <el-menu-item index="/admin/test/11">車廠</el-menu-item>
            <el-menu-item index="/admin/test/12">型號</el-menu-item>
            <el-menu-item index="/admin/test/13">公里數</el-menu-item>
            <el-menu-item index="/admin/test/14">車型</el-menu-item>
            <el-menu-item index="/admin/test/15">價格區間</el-menu-item>
            <el-menu-item index="/admin/test/16">傳遞</el-menu-item>
            <el-menu-item index="/admin/test/17">容積CC</el-menu-item>
            <el-menu-item index="/admin/test/17-1">驅動方式</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="/admin/test/18">
          <i class="el-icon-truck"></i>
          <span slot="title">車庫管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/test/19">
          <i class="el-icon-document-checked"></i>
          <span slot="title">审核管理</span>
        </el-menu-item>
        <el-submenu index="/admin/test/20">
          <template slot="title"><i class="el-icon-document"></i>資訊管理</template>
          <el-menu-item-group>
            <el-menu-item index="/admin/test/21">資訊分類</el-menu-item>
            <el-menu-item index="/admin/test/22">資訊列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="/admin/test/23">
          <i class="el-icon-user"></i>
          <span slot="title">用戶資料</span>
        </el-menu-item>
        <el-menu-item index="/admin/test/24">
          <i class="el-icon-paperclip"></i>
          <span slot="title">OpenAI</span>
        </el-menu-item>
        <el-submenu index="/admin/test/25">
          <template slot="title"><i class="el-icon-setting"></i>權限配置</template>
          <el-menu-item-group>
            <el-menu-item index="/admin/test/26">菜單管理</el-menu-item>
            <el-menu-item index="/admin/test/27">用戶管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <div class="left">{{ pageTitle }}</div>
        <div class="right">
          <span style="margin-right: 20px;">{{ nickname }}</span>
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <nuxt />
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
#__layout {
  height: 100%;
}

#__nuxt {
  height: 100%;
}

.el-button--primary {
    background-color: #201D1E;
    border-color: #201D1E;
}

.el-button--primary:focus,
.el-button--primary:hover {
    background-color: #201D1E;
    border-color: #201D1E;
}
</style>

<style scoped lang="less">
.el-container {
  height: 100%;
  background-color: rgba(242, 242, 242, 1);

  .el-menu {
    .el-menu-item.is-active {
      background-color: #FFF3E0;
      color: #000000;
      font-weight: bold;
      position: relative;

      &::after {
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        width: 3px;
        height: 100%;
        background-color: #000000;
      }
    }
  }

  .el-header {
    background-color: #201D1E;
    color: #FFFFFF;
    height: 60px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;

    .right {
      .el-icon-setting {
        font-size: 18px;
        color: #FFFFFF;
        cursor: pointer;
      }
    }
  }

  .el-aside {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(187, 187, 187, 0.3);
    overflow-x: hidden;
    height: 100%;

    /deep/ .el-menu-item-group__title {
      display: none;
    }

    .el-menu-item i,
    .el-submenu__title i {
      color: #000000;
    }

    .logo {
      margin: 20px 0;
      text-align: center;

      img {
        width: 90%;
      }
    }
  }
}
</style>

<script>
export default {
  ssr: false,
  head() {
    return {
      style: [
        {
          type: 'text/css',
          cssText: `
            html, body {
              margin: 0;
              padding: 0;
              height: 100%;
            }

            #__layout {
                height: 100%;
            }

            #__nuxt {
                height: 100%;
            }
          `
        }
      ]
    };
  },
  data() {
    return {
      currentRoute: '',
      nickname: '',
      pageTitle: ''
    };
  },
  watch: {
    '$route': 'updatePageTitle',
  },
  methods: {
    updatePageTitle() {
      const matchedRoute = this.$route.matched[0];
      const title = matchedRoute && matchedRoute.components.default.extendOptions.pageTitle;
      this.pageTitle = title || '歡迎使用';
      this.currentRoute = this.$route.path;
    },
  },
  mounted() {
    this.updatePageTitle();
    this.nickname = localStorage.getItem('nickname');
  }
}
</script>